<!-- 参考 todo -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet/less" type="text/css" href="borderEffect.less" />
    <script src="https://cdn.jsdelivr.net/npm/less@4.2.0/dist/less.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  </head>
  <body>
    <div class="flex justify-center items-center bg-lime-400" style="height: 600px">
      <div class="borderEffect">
        <img src="https://picsum.photos/200/300" lazy class="max-w-full max-h-full resultImg" />
      </div>
    </div>
    <pre>
        原理：
            1. 利用伪元素before和after分别绘制出4个方向的渐变背景
            2. 利用伪元素after绘制出一个白色的边框
            3. 利用动画rotate使背景旋转

    </pre>
    <!-- conic-gradient -->
    <h3>
      <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/conic-gradient"
        >conic-gradient</a
      >
    </h3>
    <h4>
      - <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients"
        >Using_CSS_gradients：底部链接资源 工具，例子</a
      ><br/>
      - 效果： <a href="https://projects.verou.me/css3patterns/">css3patterns</a>
    </h4>
    <style>
      .showBox {
        --size: 300px;
        width: var(--size);
        height: var(--size);
        background: var(--coninc);
      }
      .showBox--pure {
        --coninc: conic-gradient(
          red 0deg 90deg,
          green 90deg 180deg,
          blue 180deg 270deg,
          yellow 270deg 360deg
        );
      }

      .showBox--trans {
        --coninc: conic-gradient(
          red 0deg,
          /* 起点 */ green 90deg,
          blue 180deg,
          yellow 270deg,
          red 360deg /* 回到起点，形成闭环 → red→blue 也自然过渡 */
        );
      }
      .showBox--chess {
        background: conic-gradient(
            #fff 0.25turn,
            #000 0.25turn 0.5turn,
            #fff 0.5turn 0.75turn,
            #000 0.75turn
          )
          top left / 25% 25% repeat;
      }
    </style>

    <h4>纯色无过渡</h4>
    <div class="showBox showBox--pure flex justify-center items-center"></div>
    <h4>柔和过渡</h4>
    <div class="showBox showBox--trans flex justify-center items-center"></div>
    <h4>mdn-棋盘格子</h4>
    <div class="showBox showBox--chess flex justify-center items-center"></div>
  </body>
</html>
